<td-layout class="home">
  <div>
    <section class="banner mat-app-background">
      <div layout="row" layout-align="center center">
        <div class="max-width">
          <div layout="row" layout-align="space-between center">
            <div
              flex
              flex-order-xs="2"
              layout="row"
              layout-align="center center"
            >
              <div class="push-top-xl" hide-xs></div>
              <div [style.maxWidth.px]="500">
                <div
                  layout="column"
                  layout-gt-sm="row"
                  layout-align-xs="center center"
                  layout-align-sm="center center"
                  layout-align="start center"
                  class="pad-top-lg"
                >
                  <mat-icon
                    class="covalent-logo-xs push-right-sm"
                    svgIcon="assets:covalent"
                    hide-gt-sm
                  ></mat-icon>
                  <div class="text-center">
                    <h3 class="pull-bottom-xs mat-title mat-headline">
                      Covalent
                    </h3>
                    <h1
                      class="mat-title push-top-xs push-bottom-xs mat-headline-3"
                    >
                      Enterprise UI Platform
                    </h1>
                  </div>
                </div>
                <h2
                  class="mat-title tc-td-secondary push-top-xs push-bottom-sm text-center pad-sm push-left push-right mat-headline-6"
                >
                  Reusable tested tools to build robust Angular Material &
                  Angular applications
                </h2>
                <div class="push-top-lg"></div>
                <div
                  layout="column"
                  layout-align="center center"
                  layout-align-gt-sm="start start"
                >
                  <button
                    mat-raised-button
                    color="accent"
                    class="text-lg push-bottom-lg pad-xs pad-left-md pad-right-md"
                    [routerLink]="['/docs']"
                  >
                    Get started
                    <mat-icon>arrow_forward</mat-icon>
                  </button>
                  <div class="pad-top-xs pad-bottom">
                    <a
                      href="https://github.com/Teradata/covalent/stargazers"
                      class="text-nodecoration"
                    >
                      <div layout="row">
                        <div class="pad-top-xs">
                          <mat-icon
                            svgIcon="assets:github"
                            class="tc-td-secondary push-right push-left"
                          ></mat-icon>
                        </div>
                        <div layout="column" class="pad-bottom">
                          <div *ngIf="starCount" class="tc-td-secondary">
                            {{ starCount }}
                          </div>
                          <div class="mat-caption tc-td-secondary">
                            Github Stars
                          </div>
                        </div>
                      </div>
                    </a>
                  </div>
                </div>
              </div>
              <div class="push-bottom-xl" hide-xs></div>
            </div>
            <div
              flex="40"
              hide-xs
              hide-sm
              layout="column"
              layout-align="center start"
            >
              <mat-icon
                class="mat-icon-svg-xxl pad-top"
                svgIcon="assets:covalent"
              ></mat-icon>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section
      [class]="
        activeTheme === 'theme-dark' ? 'bgc-black' : 'mat-app-background'
      "
    >
      <div layout-gt-xs="row" layout-align="center center">
        <div flex class="pad max-width">
          <div class="push-top-md" hide-xs></div>
          <div>
            <mat-nav-list hide-gt-sm>
              <ng-template let-item let-last="last" ngFor [ngForOf]="sections">
                <a mat-list-item [routerLink]="[item.route]">
                  <mat-icon matListItemAvatar>
                    <span class="tc-{{ item.color }}">{{ item.icon }}</span>
                  </mat-icon>
                  <h3 matListItemTitle>{{ item.title }}</h3>
                  <p matListItemLine>{{ item.description }}</p>
                </a>
                <mat-divider *ngIf="!last" [inset]="true"></mat-divider>
              </ng-template>
            </mat-nav-list>
            <div layout="row" layout-wrap hide-xs hide-sm>
              <div
                layout="column"
                flex-gt-sm="33"
                class="pad-sm"
                *ngFor="let item of sections"
              >
                <a
                  flex
                  layout-align="start stretch"
                  [routerLink]="[item.route]"
                  mat-button
                  class="pad"
                >
                  <div
                    layout="row"
                    layout-align="start center"
                    class="push-bottom-xs"
                  >
                    <div class="icon-avatar push-right">
                      <mat-icon>{{ item.icon }}</mat-icon>
                    </div>

                    <div
                      class="mat-title push-none text-xxl tc-td-secondary push-right"
                    >
                      {{ item.title }}
                    </div>
                  </div>
                  <div
                    class="mat-subtitle-1 text-wrap text-left tc-td-secondary"
                  >
                    {{ item.description }}
                  </div>
                </a>
              </div>
            </div>
          </div>
          <div class="push-bottom-md" hide-xs></div>
        </div>
      </div>
    </section>
    <section class="cv-surface-high">
      <div layout="row" layout-align="center center">
        <div class="max-width">
          <div layout="row" class="pad-top pad-bottom">
            <div flex flex-order-xs="2" class="pad max-width">
              <div class="push-top-xxl" hide-xs></div>
              <div>
                <h2
                  class="mat-headline-5 tc-red-500 push-top-xs push-bottom-sm"
                >
                  Built with
                  <mat-icon>favorite</mat-icon>
                  on Angular
                </h2>
                <h3
                  class="mat-body-1 tc-td-secondary push-top-xs push-bottom-sm"
                >
                  Teradata is acvtively commited to Angular. Our entire product
                  suite is built or revamped on Angular.
                </h3>
                <h4
                  class="mat-body-1 tc-td-secondary push-top-xs push-bottom-sm"
                  hide-xs
                >
                  Teradata developers across the organization, contribute back
                  to the open-source community with powerful new tools being
                  developed internally.
                </h4>
              </div>
              <div class="push-bottom-xl" hide-xs></div>
            </div>
            <div
              flex="30"
              flex-xs="20"
              flex-order-xs="1"
              layout-gt-xs="column"
              layout-align="center start"
            >
              <mat-icon
                class="mat-icon-svg-xxl fill-red-500"
                svgIcon="assets:angular-outline"
              ></mat-icon>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="cv-surface-high">
      <div layout="row" layout-align="center center">
        <div class="max-width">
          <div layout="row" class="pad-top pad-bottom">
            <div flex flex-order="2" class="pad">
              <div class="push-top-xxl" hide-xs></div>
              <div>
                <h2
                  class="mat-headline-5 tc-green-A700 push-top-xs push-bottom-sm"
                >
                  Following the Material Design spec
                </h2>
                <h3
                  class="mat-body-1 tc-td-secondary push-top-xs push-bottom-sm"
                >
                  Covalent follows the Material Design specification as closely
                  as possible through the construction of all components.
                </h3>
                <h4
                  class="mat-body-1 tc-td-secondary push-top-xs push-bottom-sm"
                  hide-xs
                >
                  Adopting Material Design as our own spec allows our UI/UX
                  staff to adopt and share powerful open-source resources, while
                  Covalent end users enjoy the immediate familiarity and
                  affordance of this global deign spec.
                </h4>
              </div>
              <div class="push-bottom-xl" hide-xs></div>
            </div>
            <div
              flex="30"
              flex-xs="20"
              flex-order="1"
              layout-gt-xs="column"
              layout-align="center start"
            >
              <mat-icon
                class="mat-icon-svg-xxl fill-green-A700"
                svgIcon="assets:material-outline"
              ></mat-icon>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
  <td-layout-footer>
    <div layout-gt-xs="row" layout-align="start center">
      <div class="mat-caption">
        ©2016 - {{ year }} Teradata. All Rights Reserved
      </div>
      <span flex></span>
      <div layout-gt-xs="row">
        <a href="https://gitter.im/Teradata/covalent" target="_blank" mat-button
          >Gitter chat</a
        >
        <a
          href="https://github.com/teradata/covalent/issues"
          target="_blank"
          mat-button
        >
          Feature request
        </a>
      </div>
    </div>
  </td-layout-footer>
</td-layout>
